/* .lotus{
  animation: updown 3s ease infinite;
} */


@keyframes updown {
  0% {
      transform: translateY(-3%);
      
  }

  50% {
      transform: translateX(0%);
      rotate: 2deg;
  }

  100% {
      transform: translateY(-3%);
  }
}

.gradientText {
  background-image: linear-gradient(42deg, #874FDE 0%, #B99EE1 46%, #874FDE 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  animation: animated_gradient_text 3s ease-in-out infinite;
  -moz-animation: animaanimated_gradient_textted_text 3s ease-in-out infinite;
  -webkit-animation: animated_gradient_text 3s ease-in-out infinite;
}

@keyframes animated_gradient_text {
  0% { background-position: 0% 50%; }
  50% { background-position: 80% 50%; }
  100% { background-position: 0% 50%; }
}
.content h1{
font-family: "Geologica";
font-size: 12rem;
font-weight: var(--bold);
color: var(--white);
}

.content p{
  color:var(--white);
  opacity: 1;
  letter-spacing: 0.1em;

}


.input-form input[type="text"]{
  font-size: 1.4rem;
  background: var(--white);
  line-height: 1.6rem;
  color: var(--black);
  border-radius: 3rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--white);
  width: 40rem;
  padding-right: 5rem;
  letter-spacing: 0.1em;
}

.input-form form button[type="submit"] {
margin-left: -11.5rem;
width: 11rem;
background: var(--primary);
color: var(--white);
border: 0;
padding: 0.8rem 2rem;
border-radius: 3rem;
font-size: 1.6rem;
font-weight: var(--semibold);
animation: 0.4s ease-in;
}
.input-form form button[type="submit"]:hover{
background:#6D29A3;
color:var(--white);
border:0;
animation: 0.4s ease-out;
transform: scale(0.90);
}

.light .input-form input[type="text"]{
background: #D9D9D9;
border: 1px solid #D9D9D9;
}

.light .input-form input[type="text"]{
color:var(--white);
}

.light .input-form form button[type="submit"] {
color:var(--black);
}

.light .lotus{
  content: url("../img/Kathart_logo-light.svg");
  display: block;
}

div:where(.swal2-container) div:where(.swal2-popup) { 
  background: var(--black) !important;
  color:var(--white) !important;
  font-family: 'Questrial' !important;
}


@media(max-width:680px){
  #main .lotus{
    width:30% !important;
    margin-top: 5rem;
  }

  #main h1{
    font-size:6rem;
    margin-top: 2rem;
  }
}